<template>
  <div class="app-container">
    <div class="layout-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <div class="layout-footer">
      <!-- 
      <van-tabbar
        fixed
        route
        v-model="active"
        @change="handleChange"
      >
        <van-tabbar-item
          v-for="(item, index) in tabbars"
          :to="item.to"
          :icon="item.icon"
          :key="index"
          :info="item.info"
        >
          {{ item.title }}
        </van-tabbar-item>
      </van-tabbar> -->

      <van-tabbar
        fixed
        route
        @change="handleChange"
      >
        <van-tabbar-item
          :key="0"
          :to="this.tabbars[0].to"
          icon="wap-home"
        >首页</van-tabbar-item>
        <van-tabbar-item
          :key="1"
          :to="this.tabbars[1].to"
          icon="bars"
        >分类</van-tabbar-item>
        <van-tabbar-item
          :key="2"
          :to="this.tabbars[2].to"
          icon="bookmark"
          :badge=this.bookshelfInfo
          @click="bookshelfInfo=''"
        >书架</van-tabbar-item>
        <van-tabbar-item
          :key="3"
          :to="this.tabbars[3].to"
          icon="contact"
        >关于我</van-tabbar-item>
      </van-tabbar>
      <!-- <TabBar
        :data="tabbars"
        @change="handleChange"
      /> -->
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
export default {
  name: 'AppLayout',
  data() {
    return {
      active: {
        type: Number,
        default: 0
      },
      aboutInfo: 3,
      bookshelfInfo: '3',
      tabbars: [
        {
          title: '首页',
          to: {
            name: 'Home'
          },
          icon: 'wap-home'
        },
        {
          title: '分类',
          to: {
            name: 'Classify'
          },
          icon: 'bars'
        },
        {
          title: '书架',
          to: {
            name: 'Bookshelf'
          },
          icon: 'bookmark',
          info: 4
        },
        {
          title: '关于我',
          to: {
            name: 'About'
          },
          icon: 'contact',
          info: this.aboutInfo
        }
      ]
    }
  },
  components: {
    TabBar
  },
  methods: {
    handleChange(value) {
      console.log(1111, value)
    }
  }
}
</script>
<style scoped>
.app-container {
  background-image: url(../../../static/backgourd.png);
}
</style>
